<template>
    <div class="DBheader">
        <div class="title">
            <img src="https://img.cdn.tencent-qq.cn/Yize/2023/05/6d19ed0008bb7ad9.png" alt="">
            <h1>蛋白后宫制图团</h1>
        </div>
        <div class="bar">
            <router-link class="link" to="/">主页</router-link>
            <router-link class="link" to="/works">作品</router-link>
            <router-link class="link" to="/about">关于</router-link>
            <router-link class="link" to="/barrage">弹幕</router-link>
            <a-button type="primary" ghost class="qq" @click="joinqq()">
                <span class="icon"><qq-outlined /></span>
                <span class="text">QQ群</span>
            </a-button>
        </div>
    </div>
</template>
<script>
import { QqOutlined } from '@ant-design/icons-vue';

export default {
    components: {
        QqOutlined
    },
    methods: {
        joinqq() {
            window.open("http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=tBtpFuTvASdzKZsSbCunWi2JjVUMED-I&authKey=sxDZC%2BvUkq1TsXMwDawT9t%2FRq9pHjmf0LelowlA8BFrLsRDxU%2FihulL%2FfSG%2BHthv&noverify=0&group_code=669424319")
        }
    }
}

</script>

<style scoped lang="scss">
a {
    color: #000;
}

.DBheader {
    .title {
        padding-left: 20px;

        & img {
            width: 50px;
            height: 50px;
        }

        & h1 {
            color: #409EFF;
            padding-top: 10px;
            font-family: 'unifont';
            font-size: 14pt;
        }

        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        line-height: 50px;
    }

    .bar {
        .link {
            padding: 20px;
            text-decoration: none;
        }

        .qq {
            border-radius: 20px;
        }

        margin-right: 200px;
        display: flex;
        align-items: center;
        text-align: center;
    }

    display: flex;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 50px;
    z-index: 1;
    justify-content: space-between;
    align-items: stretch;
    border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
    background-color: #fff;
    -webkit-animation: scale-up-ver-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-ver-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@media screen and (max-width: 280px) {
    .DBheader {
        .title {
            padding-left: 0px;

            & img {
                width: 40px;
                height: 40px;
                display: none;
            }

            & h1 {
                display: none;
            }

        }

        .bar {
            .link {
                padding: 20px;
            }

            .qq {
                border-radius: 20px;
            }

            margin-right: 200px;
        }

    }
}

@media screen and (max-width: 800px) {
    .DBheader {
        .title {
            padding-left: 0px;

            & img {
                width: 40px;
                height: 40px;
            }

            & h1 {
                display: none;
            }

        }

        .bar {
            display: none;
        }

        .bar {
            .link {
                padding: 8px;
            }

            .qq {
                margin-left: 1px;
                border-radius: 20px;

                .text {
                    display: none;
                }
            }

            margin-right: 0px;
            display: flex;
            align-items: center;
            text-align: center;
        }

        display: flex;
        height: 50px;
        align-items: stretch;
        justify-content: space-evenly;
        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
    }
}
</style>